import * as echarts from "echarts/core";
import { TooltipComponent, GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

import React from "react";
import { useEffect } from "react";

echarts.use([
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

// 注册必须的组件
echarts.use([
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

const Echarts = (props) => {
  useEffect(() => {
    const myChart = echarts.init(document.querySelector(`.${props.name}`))
    const option = {
      xAxis: {
        type: "category",
        boundaryGap: false,
        data:props.x ,
      },

      yAxis: {
        type: "value",
        show: true,
        axisLine: {
          show: true,
        },
      },
      grid: {
        width: "80%",
        height: "70%",
        top:'15%',
        right:'15%',
        left:'15%',
      },
      tooltip: {
        trigger: "item",
        position: "top",
        formatter: (data) => {
          return `<p>在线听课人数: ${data.data}</p>`;
        },
      },
      series: [
        {
          data: props.y,
          type: "line",
          smooth: true,
          areaStyle: { color: "#f3fffe" },
        },
      ],
    }
    option && myChart.setOption(option);
  }, [props])

  return (
    <div className={props.name} style={{ width: "1200px", height: "500px" }}>
    </div>
  );
}
export default Echarts
